<script setup lang="tsx">
import type { DataTableColumns } from 'naive-ui'
import { fetchUserList } from '@/service/api/user'
import UserCreateModal from '@/views/user/components/UserCreateModal.vue'
import { NButton, NPopconfirm, NSpace } from 'naive-ui'

const loading = ref(false)
const createVisible = ref(false)
const checkedRowKeys = ref<number[]>([])
const tableData = ref<Api.User.UserPageResponse[]>([])
const userParam = ref<Api.User.UserPageRequest>({
  page: 1,
  limit: 10,
})
const total = ref(0)

function openModal() {
  createVisible.value = true
}

function deleteData(id: number) {
  window.$message.success(`删除菜单id:${id}`)
}

async function changePage(page: number, size: number) {
  try {
    loading.value = true
    await fetchUserList(userParam.value).then((res: Api.Common.PageResponse<Api.User.UserPageResponse>) => {
      tableData.value = res.data.list
      total.value = res.data.total
      userParam.value = { ...userParam.value, page, limit: size }
    })
  }
  finally {
    loading.value = false
  }
}

async function handlePositiveClick() {
  window.$message.success(`批量删除id:${checkedRowKeys.value.join(',')}`)
}

onMounted(async () => {
  try {
    loading.value = true
    await fetchUserList(userParam.value).then((res: any) => {
      tableData.value = res.data.list
      total.value = res.data.total
    })
  }
  finally {
    loading.value = false
  }
})

const columns: DataTableColumns<Api.User.UserPageResponse> = [
  {
    type: 'selection',
    width: 30,
  },
  {
    title: '用户名称',
    key: 'username',
    width: 200,
  },
  {
    title: '用户类型',
    align: 'center',
    key: 'type',
    ellipsis: {
      tooltip: true,
    },
  },
  {
    title: '操作',
    align: 'center',
    key: 'actions',
    width: '15em',
    render: (row) => {
      return (
        <NSpace justify="center">
          <NButton size="small" onClick={() => tableModalRef.value.openModal('view', row)}>分配业务线</NButton>
          <NButton size="small" onClick={() => tableModalRef.value.openModal('edit', row)}>编辑</NButton>
          <NPopconfirm
            onPositiveClick={() => deleteData(row.id)}
          >
            {{
              default: () => '确认删除',
              trigger: () => <NButton size="small" type="error">删除</NButton>,
            }}
          </NPopconfirm>
        </NSpace>
      )
    },
  },
]
</script>

<template>
  <n-card>
    <template #header>
      <NButton type="primary" @click="openModal">
        <template #icon>
          <icon-park-outline-add-one />
        </template>
        新建
      </NButton>
    </template>
    <template #header-extra>
      <n-flex>
        <NButton type="primary" secondary @click="getUserPage">
          <template #icon>
            <icon-park-outline-refresh />
          </template>
          刷新
        </NButton>
        <NPopconfirm @positive-click="handlePositiveClick">
          <template #trigger>
            <NButton type="error" secondary>
              <template #icon>
                <icon-park-outline-delete-five />
              </template>
              批量删除
            </NButton>
          </template>
          确认删除所有选中用户？
        </NPopconfirm>
      </n-flex>
    </template>
    <NSpace vertical size="large">
      <n-data-table
        v-model:checked-row-keys="checkedRowKeys"
        :row-key="(row:AppRoute.RowRoute) => row.id"
        :columns="columns"
        :data="tableData"
        :loading="loading"
        size="small"
        :scroll-x="1200"
      />
      <Pagination :count="total" @change="changePage" />
      <UserCreateModal
        :visible="createVisible"
        modal-name="创建用户"
        @close="() => createVisible.value = false"
      />
    </NSpace>
  </n-card>
</template>

<style scoped>

</style>
